<template>
  <div>
    <a-row type="flex" :gutter="10">
      <!--   产量区域   -->
      <a-col :span="12">
        <br />
        <a-card title="产量">
          <BarChart :chart-data="chartDataBar"></BarChart>
        </a-card>
      </a-col>
      <!--   各产线排名区域   -->
      <a-col :span="12">
        <br />
        <a-card title="各产线排名">
          <bar-chart-sort ref="barChartSort"></bar-chart-sort>
        </a-card>
      </a-col>
      <!--   开机率区域   -->
      <a-col :span="16">
        <br />
        <a-card title="开机率">
          <LineChart ref="LineChart"></LineChart>
        </a-card>
      </a-col>
      <!--   时间稼动率区域   -->
      <a-col :span="8">
        <br />
        <a-card
          style="min-height: 455px"
          :tab-list="ListNoTitlePro"
          :active-tab-key="noTitleKeyPro"
          @tabChange="(key) => onTabChangePro(key, 'noTitleKeyPro')"
        >
          <div class="progressbox" v-if="noTitleKeyPro === '2'">
            <div v-if="TimeActivationData.length > 0">
              <p v-for="(item, index) in TimeActivationData" :key="index">
                <span class="progressname">{{ item.groupName }}</span>
                <span style="display: inline-block; width: 70%"
                  ><a-progress
                    strokeColor="#FDBA00"
                    :percent="Math.round(item.groupTimeActivation * 100)"
                    :format="(percent) => `${percent}%`"
                /></span>
              </p>
            </div>

            <a-empty style="margin-top: 60px" v-else />
          </div>
          <div class="progressbox" v-if="noTitleKeyPro === '3'">
            <div v-if="QualityActivationData.length > 0">
              <p v-for="(item, index) in QualityActivationData" :key="index">
                <span class="progressname">{{ item.groupName }}</span>
                <span style="display: inline-block; width: 70%"
                  ><a-progress
                    strokeColor="#FDBA00"
                    :percent="Math.round(item.groupQualityActivation * 100)"
                    :format="(percent) => `${percent}%`"
                /></span>
              </p>
            </div>
            <a-empty style="margin-top: 60px" v-else />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import api from "@/api/apiServer";
import moment from "moment/moment";
import BarChart from "./components/BarChart";
import LineChart from "./components/LineChart";
import BarChartSort from "./components/BarChartSort";
import { getDayAll } from "@/unit/tool";
export default {
  name: "index",
  components: { BarChart, BarChartSort, LineChart },
  data() {
    return {
      dateType: 1,
      chartData: {
        expectedData: [],
        date: [],
        name: [],
      },
      chartDataBar: {
        expectedData: [],
        date: [],
      },
      tabListNoTitle: [
        { key: "1", tab: "开机率" },
        { key: "2", tab: "运行时间" },
        { key: "3", tab: "故障时间" },
      ],
      noTitleKey: "1",
      ListNoTitlePro: [
        { key: "2", tab: "时间稼动率" },
        { key: "3", tab: "性能稼动率" },
      ],
      noTitleKeyPro: "2",
      TimeActivationData: [], // 时间稼动率区域
      QualityActivationData: [], // 性能稼动率区域
      str: "%",
      sortStr: "个",
    };
  },
  computed: {
    macsn() {
      return this.$route.query.macSn;
    },
    startTime() {
      return moment()
        .subtract(7, "days")
        .format("YYYY-MM-DD");
    },
    endTime() {
      return moment()
        .subtract(1, "days")
        .format("YYYY-MM-DD");
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    //所有默认显示的图表初始化
    init() {
      this.getDayProduceSum(); //某时间段每天产量
      this.getGroupProduceRank();
      this.getGroupOnlineRate();
      this.getGroupTimeActivation();
      this.getGroupQualityActivation();
    },
    // 获取产量数据
    async getDayProduceSum() {
      const res = await api.DayProduceSum({
        startTime: this.startTime,
        endTime: this.endTime,
      });
      if (res.code === 200) {
        this.haveBarData(res.data);
      } else {
        this.haveBarData([]);
      }
      this.haveBarData(res);
    },
    //某时间段开机率
    async getGroupOnlineRate() {
      const res = await api.GroupOnlineRate({
        startTime: this.startTime,
        endTime: this.endTime,
      });
      console.log(res);
      if (res.data.length > 0) {
        this.$refs.LineChart.model = this.setData(res.data);
      } else {
        this.$refs.LineChart.model.dataX = getDayAll(
          this.startTime,
          this.endTime
        );
        this.$refs.LineChart.model.dataY = [0, 0, 0, 0, 0, 0, 0];
      }
    },
    // 处理数据
    setData(result) {
      let dataX = [];
      let legendData = [];
      let series = [];
      result.forEach((item) => {
        dataX = this.getDataKey(item.arrayData, "day");
        legendData = [...legendData, item.productLine];
        series.push({
          name: item.productLine,
          type: "line",
          stack: "Total",
          data: this.getDataKey(item.arrayData, "yData"),
        });
      });
      return { dataX, legendData, series };
    },
    getDataKey(data, key) {
      return data.map((item) => item[key]);
    },
    //产量数据转换
    haveBarData(list) {
      let expectedData = [];
      let dates = null;
      //每天
      dates = getDayAll(this.startTime, this.endTime);
      dates.forEach((items) => {
        let opt = null;
        if (list.length > 0) {
          opt = list.find((element) => element.day === items); //每天
          if (opt) {
            expectedData.push(opt.num);
          } else {
            expectedData.push(0);
          }
        }
      });
      if (expectedData.length > 0) {
        this.chartDataBar.expectedData = expectedData;
      } else {
        this.chartDataBar.expectedData = [0, 0, 0, 0, 0, 0, 0];
      }
      this.chartDataBar.date = dates;
      console.log(this.chartDataBar);
    },

    //查询用户厂各产线时间稼动率
    async getGroupTimeActivation() {
      let params = {
        startTime: this.startTime,
        endTime: this.endTime,
      };
      const { data: res } = await api.GroupTimeActivation(params);
      this.TimeActivationData = res;
    },
    //查询用户厂各产线性能稼动率
    async getGroupQualityActivation() {
      let params = {
        startTime: this.startTime,
        endTime: this.endTime,
      };
      const { data: res } = await api.GroupQualityActivation(params);
      this.QualityActivationData = res;
    },
    //某时间产量排名
    async getGroupProduceRank() {
      const { data: res } = await api.GroupProduceRank({
        startTime: this.startTime,
        endTime: this.endTime,
      });
      let params = {
        dataX: [],
        dataY: [],
      };
      res.forEach((item) => {
        params.dataY.push(item.count.toString());
        params.dataX.push(item.macname);
      });
      this.$refs.barChartSort.model = params;
    },

    onTabChangePro(key, type) {
      this[type] = key;
    },
  },
};
</script>

<style scoped lang="less">
@import url("./style.less");
</style>
